<template>
	<view style="background: #f2f2f2;min-height: 100vh;">
		<view style="position: relative;color:white;width:100%;height: 400rpx;
			background-repeat: no-repeat;background-position: center;background-size: cover;padding-top: 20rpx;">
			<image style="position:absolute;left:0;top:0;width: 100%;height:100%;z-index: 2;"
				:src="baseUrl + (userInfo.background_image?userInfo.background_image:'/assets/img/homeban.png')"
				mode="scaleToFill" />
			<view class="" style="position:absolute;left:0;top:0;width: 100%;height:100%;z-index: 3;">


				<view style="display: flex;align-items: center;margin: 0 20rpx;margin-top: 30rpx;">
					<view style="display: flex;align-items: center;padding-right: 10rpx;margin-right: 10rpx;"
						@click="goLoginout">
						<u-avatar :src="baseUrl + userInfo.avatar"></u-avatar>
						<text
							:style="getAuth(userInfo.group_id,[1,2])?'border-right: 1px solid #506A8B;':''"
							style="margin-left: 10rpx;color: #506A8B;padding-right:10rpx;">{{userInfo.nickname}}</text>
					</view>

					<text v-if="getAuth(userInfo.group_id,[1,2])" style="color: #0C2F5B;">{{userInfo.media_name}}</text>
				</view>
				<view v-if="getAuth(userInfo.group_id,[1,2])"
					style="display: flex;align-items: center;justify-content: space-around;background-color: rgba(233, 240, 251, 1);padding: 20rpx 0;margin: 70rpx 20rpx 0 20rpx;height:150rpx;border-radius: 20rpx;">
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.alarmNum}}</text>
						<text class="num-text">故障总数</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.completeNum}}</text>
						<text class="num-text">已修复</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.overdueNum}}</text>
						<text class="num-text">已过期</text>
					</view>

				</view>
				<view v-else-if="getAuth(userInfo.group_id,[3])"
					style="display: flex;align-items: center;justify-content: space-around;background-color: rgba(233, 240, 251, 1);padding: 20rpx 0;margin: 70rpx 20rpx 0 20rpx;height:150rpx;border-radius: 20rpx;position: relative;">
					<!-- <view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.alarmNum}}</text>
						<text class="num-text">故障总数</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.completeNum}}</text>
						<text class="num-text">已修复</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.overdueNum}}</text>
						<text class="num-text">已过期</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.taskNum}}</text>
						<text class="num-text">任务</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.taskcompleteNum}}</text>
						<text class="num-text">完成任务</text>
					</view> -->
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.tasktodayNum}}</text>
						<text class="num-text">打卡总数</text>
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<text class="num">{{indexData.taskTodayOverdueNum}}</text>
						<text class="num-text">未打卡数</text>
					</view>
					<view style="position: absolute;left: 0;top:-50rpx;width: 100%;text-align: center;color: #333;">今日打卡</view>

				</view>
			</view>
		</view>
		<view style="color:black;margin: 20rpx 20rpx;" v-if="getAuth(userInfo.group_id,[2])">

			<view style="display: flex;align-items: center;justify-content: center;">
				<view
					style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-right: 30rpx;"
					@click="goDailyReport">
					<text style="margin-right: 20rpx;">每日汇报</text>
					<!-- <u--image :showLoading="true" src="../../static/imgs/icon1.png" width="70rpx" height="70rpx"
						@click="click"></u--image> -->
					<image src="../../static/imgs/icon1.png" style="width: 70rpx;height: 70rpx;"
						@click="click"></image>


				</view>
				<!-- <view style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;"
					@click="goHistoryReport">
					<text style="margin-right: 20rpx;">历史汇报</text>
					<u--image :showLoading="true" src="../../static/imgs/icon2.png" width="70rpx" height="70rpx" @click="click"></u--image>
					
				</view> -->
				<view
					style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;"
					@click="goSetDuty">
					<text style="margin-right: 20rpx;">设定值班</text>
					<!-- <u--image  src="../../static/imgs/icon2.png" width="70rpx" height="70rpx"
						@click="click"></u--image> -->
						<image  src="../../static/imgs/icon2.png" style="width: 70rpx;height: 70rpx;"
							@click="click"></image>

				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<!-- @click="setOpen()"> -->
				<view
					style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-top: 40rpx;margin-right: 30rpx;"
					@click="goSetStop()">

					<text style="margin-right: 20rpx;">设定暂停</text>
					<!-- <u--image :showLoading="true" src="../../static/imgs/icon3.png" width="70rpx" height="70rpx"
						@click="click"></u--image> -->
						<image  src="../../static/imgs/icon3.png" style="width: 70rpx;height: 70rpx;"
							@click="click"></image>


				</view>
				<view
					style="display: flex;align-items: center;justify-content:center;background: #fff;width:40%;height: 150rpx;border-radius: 10px;margin-top: 40rpx;"
					@click="goSummary">
					<text style="margin-right: 20rpx;">汇总小结</text>
					<!-- <u--image :showLoading="true" src="../../static/imgs/icon4.png" width="87rpx" height="70rpx"
						@click="click"></u--image> -->
						<image  src="../../static/imgs/icon4.png" style="width: 70rpx;height: 70rpx;"
							@click="click"></image>

				</view>
			</view>
			<!-- <view v-if="getAuth(userInfo.group_id,[2])" style="display: flex;align-items: center;justify-content: center;">
				<view style="display: flex;align-items: center;justify-content:center;background: #fff;width:85%;height: 150rpx;border-radius: 10px;margin-top: 40rpx;"
					@click="goSetDuty()">
					<text style="margin-right: 20rpx;">设定值班</text>
					<u--image :showLoading="true" src="../../static/imgs/icon3.png" width="70rpx" height="70rpx" @click="click"></u--image>
					
					
				</view>
			</view> -->
		</view>
		<!-- 发送通知 -->
		<!-- <view v-if="getAuth(userInfo.group_id,[3])" style="display: flex;align-items: center;justify-content: center;">
			<view
				style="display: flex;align-items: center;justify-content:center;background: #fff;width:95%;height: 150rpx;border-radius: 10px;"
				@click="goSetSend()">
				<text style="margin-right: 20rpx;">发送通知</text>

			</view>
		</view> -->
		<!-- 通知列表 -->
		<view class="" v-if="getAuth(userInfo.group_id,[1,2])"
			style="background: #fff;margin: 30rpx 20rpx 80rpx 20rpx;box-sizing:border-box;padding: 0 20rpx;border-radius: 10px;padding-bottom:100rpx;">
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;height: 80rpx;margin-bottom: 20rpx;">
				<text class="notify">最新报警</text>
				<!-- <text class="baojin" @click="baojinShow=true">报警规则</text> -->
				<text class="baojin" @click="goBaojin">查看更多</text>
			</view>
			<view class="item" style="height: 150rpx;margin-top: 20rpx;" v-for="notice in noticeList"
				:key="notice.log_id"
				@click="baojinDetail(notice.id,notice.source,notice.status,notice.create_time,notice.r_id)">

				<view class=""
					style="width:70%;display: flex;justify-content: space-around;flex-direction: column;margin-left: 20rpx;">
					<view class="baojin-time">报警时间:{{getTimeFormat(notice.create_time)}}</view>
					<view class="baojin-time" v-if="notice.source!='notice'">
						类型:{{notice.alarmTypeName}}
					</view>
					<view class="baojin-info">{{notice.content}}</view>
				</view>
				<view class=""
					style="display: flex;align-items: flex-start;justify-content: center;width:30%;margin-top: 20rpx;">
					<view v-if="notice.status==1" class="finish-btn" @click.stop="">
						<text class="btn-text">已完成</text>
					</view>
					<view v-else-if="notice.status==0" class="d-btn" @click.stop="noticeStatus(notice)">
						<text class="btn-text">待处理</text>
					</view>
					<view v-else class="y-btn" @click.stop="">
						<text class="btn-text">已过期</text>
					</view>

				</view>


			</view>


		</view>
		<!-- 图表数据 -->
		<view v-if="getAuth(userInfo.group_id,[3])"
			style="background: #fff;margin: 20rpx 20rpx;border-radius: 10rpx;padding: 10rpx;padding-bottom: 150rpx;">
			<view class="" style="font-weight: bold;display: flex;align-items: center;justify-content: space-between;">
				<text style="border-bottom: 1px solid #0197FF;padding-bottom: 10rpx;;">站台每日打卡情况</text>
				<u-popup :show="mediaShow" mode="bottom" @close="cancelRange" :zIndex="100075">
					<view style="margin:20rpx;margin-top:20rpx;">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<text @click="cancelRange">取消</text>
							<text @click="confirmRange">确定</text>
						</view>
						<view class="" style="height:700rpx;margin-top:20rpx;overflow-y: scroll;padding-bottom: 30rpx;">
							<u-radio-group v-model="range" placement="column" @change="checkboxChange">
								<view class=""
									style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;"
									v-for="(item,index) in mediaList" :key="item.id">
									<view class=""
										style="display: flex;align-items: center;justify-content: space-between;">
										<view style="display: flex;align-items: center;">
											<text style="font-size: 17px;">{{item.name}}</text>
										</view>
										<u-radio :label="' '" :name="item.id">
										</u-radio>
									</view>
								</view>
							</u-radio-group>
						</view>

					</view>
				</u-popup>
				<text @click="openRange()">{{selectMedia.name || '选择台站'}}</text>
			</view>
			<view class="charts-box" v-show="!mediaShow">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view style="height:30rpx;"></view>
		<!-- 报警列表 -->
		<!-- 底部导航栏 -->
		<tb />
		<!-- <tabbar /> -->
		<!-- 报警规则弹框 -->
		<u-modal :show="baojinShow" :title="title" :content='content' @confirm="baojinShow=false" :asyncClose="true">
		</u-modal>
		<!-- 报警信息弹框 -->
		<u-popup :show="baojinInfoShow" customStyle="{height:'20px';}" :round="2" mode="center"
			@close="baojinInfoClose">
			<view class="" style="display: flex;align-items: center;justify-content: space-between;padding:20rpx;">
				<text class="baojin-f">{{handleNotice.source == 'alarm' ? '报警信息' : '通知信息'}}</text>
				<u-icon @click="baojinInfoClose" name="close" size="25"></u-icon>
			</view>
			<view style="min-height: 400rpx;max-height: 800rpx;width:600rpx;margin: 20rpx;overflow-y: scroll;">
				<!-- 显示 -->
				<block v-if="showType=='detail'">
					<view class="" style="margin-bottom: 20rpx;">
						{{msgFlow.content}}
					</view>
					<view class="">
						<u-steps current="1" direction="column" :dot="true">
							<u-steps-item v-for="(flow,index) in msgFlow.flowDetail" :key="index" :title="flow.describe"
								:desc="flow.noticeTime">
							</u-steps-item>
						</u-steps>
					</view>
					<view class="notify" style="margin-bottom: 10rpx;font-size: 25rpx;">备注</view>
					<view class="" v-for="(describe,index) in msgFlow.describeList" :key="index">
						{{describe.describeTime}} {{describe.username}}: {{describe.describe}}
					</view>
				</block>
				<!-- 修改处理通知 -->
				<block v-else>
					<view class="" style="margin-bottom: 20rpx;">
						{{handleNotice.content}}
					</view>
					<view class="">
						<view class="">
							<text class="notify">解决情况 </text>
							<u-radio-group style="margin: 10rpx 0;" v-model="handleNotice.status">
								<u-radio :customStyle="{marginBottom: '8px'}" label="未解决" name="0">
								</u-radio>
								<!-- <u-radio :customStyle="{marginBottom: '8px'}" label="解决中" :name="0"> -->
								<!-- </u-radio> -->
								<u-radio :customStyle="{marginBottom: '8px'}" label="已解决" name="1">
								</u-radio>
							</u-radio-group>
						</view>
						<view class="notify" style="margin-bottom: 10rpx;">备注</view>
						<view class="" style="">
							<u-textarea v-model="handleNotice.describe" placeholder="请输入内容"></u-textarea>
							<view class="" style="margin: 20rpx 0;display:flex;flex-wrap: wrap;">
								<view class="" style="position: relative;width: 200rpx;margin: 10rpx	;"
									v-for="(img,index) in handleNotice.imgs" :key="index">
									<image style="width: 200rpx;height:200rpx;" :src="baseUrl + img" mode="">
									</image>
									<u-icon color="red" style="position: absolute;right: -10px;top: -10px;"
										@click="delImg(index)" name="close" size="25"></u-icon>
								</view>
								<view class="add-img"
									style="display: flex;margin: 10rpx;justify-content: center;align-items: center;"
									@click="upload()">
									<image style="width: 60rpx;height:60rpx;" src="@/static/imgs/add.png" mode="">
									</image>
								</view>
							</view>

							<view class="" style="margin: 0 60rpx;">
								<u-button type="primary" @click="notice" text="上传"></u-button>
							</view>

						</view>

					</view>
				</block>


			</view>
		</u-popup>
		<!-- 设定暂停弹框 -->
		<u-popup :show="setShow" customStyle="{height:'20px';}" :round="2" mode="center" @close="setClose">
			<view style="min-height: 400rpx;width:600rpx;margin: 20rpx;overflow-y: scroll;">
				<view class=""
					style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;">
					<text class="baojin-f">设定暂停</text>
					<u-icon @click="setClose" name="close" size="25"></u-icon>
				</view>
				<view class="" style="color: #426EF6;">针对统一暂停时间进行设定，此时间段内不做督办流程传达</view>
				<view class="" style="width: 100%;margin: 20rpx 0;">
					<date-time v-if="this.notice_status == 0" @time1Confirm="time1ConfirmSet"
						@time2Confirm="time2ConfirmSet" :alarm_stat_start="off_notice_start"
						:alarm_stat_end="off_notice_end" />
				</view>
				<view class="" style="display: flex;">
					<text style="margin-right: 20rpx;">状态</text>
					<u-radio-group v-model="notice_status" placement="row">
						<u-radio label="关闭" :name="0"></u-radio>
						<u-radio label="开启" :name="1"></u-radio>
					</u-radio-group>
					<!-- <u-switch v-model="notice_status"></u-switch> -->
				</view>
				<view class="" style="margin-top: 120rpx;margin-bottom: 60rpx;">
					<u-button type="primary" @click="setNoticeStatus" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
		<websocket @reloadData="reloadData" ref="websocket"></websocket>
	</view>
</template>

<script>
	import DateTime from '@/components/date-time/date-time.vue'
	import tb from '../../uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-overturn.vue'
	export default {
		components: {
			DateTime,
			tb
		},
		data() {
			return {
				openAuth: true,
				demo: 1,
				handleNotice: {
					id: '',
					status: '',
					source: '',
					describe: '',
					imgs: []
				},
				alarm_stat_start: '',
				alarm_stat_end: '',
				off_notice_start: '',
				off_notice_end: '',
				notice_status: false,
				baojinCalDate: [],
				minDate: '',
				setCalShow: false,
				setDate: [],
				setShow: false,
				fileList1: [],
				radiovalue1: '',
				baojinInfoShow: false,
				baojinShow: false,
				title: '报警规则',
				content: '收到通知，会出现弹框提示',
				show: false,
				mode: 'range',
				list: ['选项1', '选项2', '选项3'],
				selectedValue: '区域',
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: true,
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "0",
						fontSize: 25,
						color: "#666666"
					},
					subtitle: {
						name: "总数",
						fontSize: 15,
						color: "#666666"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				indexData: {},
				noticeList: [],
				msgFlow: {},
				page: 1,
				row: 10,
				isLoading: false,
				loadTitle: '加载更多',
				showType: 'edit', //打开通知列表的修改显示
				mediaShow: false,
				mediaList: [],
				range: [],
				selectMediaList: [],
				selectMedia:{}//选中电视台
			}
		},
		onLoad() {

			// 用户没有登录直接跳转到登录页面
			if (!this.token) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			// this.userInfo.group_id = 2
			// this.$u.vuex('userInfo', this.userInfo)



		},
		onShareAppMessage() {
			return {
				title: '分享给微信好友',
				path: '/pages/index/index'
			};
		},
		onShow() {
			// this.getIndexList()
			this.initBaojinList()
			this.getServerData();
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		/**
		 * 触底加载更多
		 */
		onReachBottom() {
			if (this.getAuth(this.userInfo.group_id, [3])) {
				return
			}
			this.getIndexList() // 加载更多数据
		},
		computed: {
			getTimeFormat() {
				return (time) => {
					return this.$u.timeFormat(time, 'yyyy-mm-dd')
				}
			},
			// 判断权限
			getAuth() {
				return (group_id, group_ids) => {
					if (this.openAuth) {
						if (group_ids.includes(group_id)) {
							return true
						} else {
							return false
						}
					} else {
						return true
					}
				}
			}
		},
		onReady() {
			this.$nextTick(function() {
				/*下次 DOM 更新时，找到某个控件*/
				// this.$refs.websocket.close();
				this.$refs.websocket.init();
			});
			this.getIndexAlarmStat();

		},
		// onHide(){
		// 	console.log(5555);
		// 	this.$refs.websocket.close();
		// },
		onUnload() {
			this.$refs.websocket.close();
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.runtime.quit();
			return true //return true的意思是禁止返回到上一个界面
			// #endif
		},
		methods: {
			goBaojin() {
				uni.setStorageSync('tabbarIndex', 2)
				uni.redirectTo({
					url: '/pages/baojin/list'
				})
			},
			cancelRange() {
				this.mediaShow = false
			},
			confirmRange(e) {
				console.log(this.range);
				this.getIndexAlarmStat(this.range);
				this.mediaList.forEach(item => {
					if(item.id == this.range){
						this.selectMedia = item
					}
				})
				this.mediaShow = false
			},
			getMediaList() {
				this.$api.common.getMediaList({}).then(res => {
					console.log({
						res
					});
					if (res.code == 1) {
						this.mediaList = res.data

					}

				})
			},
			openRange() {
				this.getMediaList()
				this.mediaShow = true
			},
			checkboxChange(e) {

			},
			baojinDetail(id, source, status, time, r_id) {
				time = this.getTimeFormat(time)
				if (source == 'notice') {
					// 跳转任务详情
					uni.navigateTo({
						url: `/pages/task/detail?id=${id}&source=${source}&status=${status}&time=${time}&r_id=${r_id}`
					})
				} else if (source == 'alarm') {
					// 跳转报警详情
					uni.navigateTo({
						url: `/pages/baojin/detail?id=${id}&source=${source}&status=${status}&time=${time}&r_id=${r_id}`
					})
				}

			},
			// 有websocket通知,刷新数据
			reloadData() {
				this.getServerData();
				this.initBaojinList()
			},
			// 初始化报警列表
			initBaojinList() {
				this.page = 1
				this.row = 10
				this.noticeList = [];
				this.getIndexList()
			},
			// 处理通知
			notice() {
				this.handleNoticeSumbit()
			},
			// 处理通知接口
			handleNoticeSumbit() {
				let handleNotice = JSON.parse(JSON.stringify(this.handleNotice))
				if (!handleNotice.id || !handleNotice.status || !handleNotice.source) {
					return this.$u.toast('通知id或状态或来源不能为空')
				}
				handleNotice.imgs = handleNotice.imgs.join(',')
				this.$api.common.handleNotice(handleNotice).then(res => {
					if (res.code == 1) {
						this.$u.toast('操作成功')

						setTimeout(() => {
							this.initBaojinList()
						}, 500)

					}
				})
			},
			//删除图片
			delImg(index) {
				this.handleNotice.imgs.splice(index, 1)
			},
			// 上传图片
			upload() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: this.baseUrl + '/api/common/upload', // 你的上传接口地址
								filePath: item,
								header: {
									token: this.token
								},
								name: 'file', // 这里根据后端需要的字段来定义
								formData: {
									'user': 'test' // 其他要传的参数
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									if (data.code == 1) {
										this.handleNotice.imgs.push(data.data.url)
									}
									this.$u.toast(data.msg)
									// 处理上传成功的结果
								},
								fail: (uploadFileErr) => {
									// 处理上传失败的情况
								}
							});
						})

					}
				});
			},
			setOpen() {
				this.getUserInfo()
				this.setShow = true
			},
			// 设置通知状态
			setNoticeStatus() {
				if (this.notice_status == 1) {
					this.off_notice_start = ''
					this.off_notice_end = ''
				}

				let data = {
					off_notice_start: this.off_notice_start,
					off_notice_end: this.off_notice_end,
					notice_status: this.notice_status
				};
				this.$api.common.setNoticeStatus(data).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg)
						this.setShow = false
						this.getUserInfo()
					}

				})
			},
			// 更新用户信息
			getUserInfo() {
				this.$api.user.userInfo({}).then(res => {
					if (res.code == 1) {
						let userInfo = res.data.userinfo;
						if (userInfo.off_notice_start && userInfo.off_notice_end) {
							this.off_notice_start = this.$u.timeFormat(userInfo.off_notice_start,
								'yyyy-mm-dd hh:MM')
							this.off_notice_end = this.$u.timeFormat(userInfo.off_notice_end, 'yyyy-mm-dd hh:MM')
						} else {
							this.off_notice_start = ''
							this.off_notice_end = ''
						}
						this.notice_status = userInfo.notice_status
						this.$u.vuex('userInfo', userInfo)

					}
				})
			},
			isMoreThanOneYearApart(date1, date2) {
				const year1 = date1.getFullYear();
				const year2 = date2.getFullYear();
				// 计算两个日期的年份差
				const yearDifference = Math.abs(year2 - year1);
				// 如果年份差值大于或等于2，则不超过一年
				return yearDifference >= 2;
			},
			time1Confirm(time) {
				this.alarm_stat_start = time
			},
			time2Confirm(time) {
				this.alarm_stat_end = time
				if (this.alarm_stat_start && this.alarm_stat_end) {
					if (this.isMoreThanOneYearApart(new Date(this.alarm_stat_start), new Date(this.alarm_stat_end))) {
						return this.$u.toast('时间范围不能超过一年');
					}
					this.getIndexAlarmStat();
				}
			},
			time1ConfirmSet(time) {
				this.off_notice_start = time
			},
			time2ConfirmSet(time) {
				this.off_notice_end = time
			},
			setCalConfirm(e) {
				this.setDate = e;
				this.setCalShow = false
			},
			setCalClose() {
				this.setCalShow = false
			},
			setClose() {
				this.setShow = false
			},
			deletePic() {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			afterRead() {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
			},
			baojinInfoClose() {
				this.baojinInfoShow = false;
				// 清空
				this.handleNotice = {
					id: '',
					status: '',
					source: '',
					describe: '',
					imgs: []
				}

			},
			// 打开处理通知的窗口
			baojinInfoOpen(id, source, showType) {
				this.getMsgFlow(id, source)
				this.handleNotice.id = id
				this.handleNotice.source = source
				this.showType = showType
				this.baojinInfoShow = true;
			},
			noticeStatus(notice) {
				if (notice.status == 1) {
					return this.$u.toast('已处理')
				} else if (notice.status == 2) {
					return this.$u.toast('已过期，后台处理')
				}
				this.handleNotice.id = notice.r_id
				this.handleNotice.source = notice.source
				this.handleNotice.status = '1'
				this.handleNoticeSumbit()
			},
			goLoginout() {
				uni.navigateTo({
					url: '/pages/login/logout'
				})
			},
			goDailyReport() {
				uni.navigateTo({
					url: '/pages/index/dailyReport'
				})
			},
			goSetDuty() {
				uni.navigateTo({
					url: '/pages/set/setDuty'
				})
			},
			goSetSend() {
				uni.navigateTo({
					url: '/pages/set/send'
				})
			},
			goSetStop() {
				uni.navigateTo({
					url: '/pages/set/setStop'
				})
			},

			goHistoryReport() {
				uni.navigateTo({
					url: '/pages/index/historyReport'
				})
			},
			goSummary() {
				uni.navigateTo({
					url: '/pages/index/summary'
				})
			},

			confirm(e) {
				this.baojinCalDate = e
				this.show = false
			},
			close() {
				this.show = false
			},
			onChange(e) {
				this.selectedValue = this.list[e.detail.value];
			},
			getServerData() {
				this.$api.common.index({
					alarm_stat_start: this.alarm_stat_start,
					alarm_stat_end: this.alarm_stat_end
				}).then(res => {
					if (res.code == 1) {
						// this.chartData = {
						// 	categories: res.data.alarmStat.x,
						// 	series: [{
						// 		name: "时间",
						// 		data: res.data.alarmStat.y
						// 	}, ]
						// };
						this.indexData = res.data;

					}
				})
			},
			getIndexAlarmStat(range = null) {
				let data = {}
				if (range) {
					data = {
						media_id: range
					}
				}
				this.$api.common.getMediaStat(data).then(res => {
					console.log({
						res
					});
					if (res.code == 1) {
						let data = res.data
						// if (res.data.length > 5) {
						// 	data = res.data.slice(0, 6)
						// }
						let sum = 0
						// data = data.map((item, index) => {
						// 	sum += item.alarmNum
						// 	// return {
						// 	// 	"name": item.name,
						// 	// 	"value": item.alarmNum
						// 	// }
						// 	return {
						// 		"name": item.name,
						// 		"value": item.alarmNum
						// 	}

						// })
						let datas = []
						if(range){
							let item = data[0]
							datas = [
								{
								"name": '打卡总数',
								"value": item.tasktodayNum
								},
								{
								"name": '未打卡数',
								"value": item.taskTodayOverdueNum
								}
							]
						}else{
							datas = [
								{
								"name": '打卡总数',
								"value": this.indexData.tasktodayNum
								},
								{
								"name": '未打卡数',
								"value": this.indexData.taskTodayOverdueNum
								}
							]
						}
						
						console.log({datas});
						

						this.opts.title.name = sum.toString()
						//模拟从服务器获取数据时的延时
						setTimeout(() => {
							//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
							let res = {
								series: [{
									data: datas
								}]
							};
							this.chartData = JSON.parse(JSON.stringify(res));
							this.selectMediaList = data
						}, 500);
					}
				})
			},
			loaddata() {
				if (!this.isLoading) {
					this.getIndexList()
				}
			},
			getIndexList() {
				if (this.getAuth(this.userInfo.group_id, [3])) {
					return
				}
				this.isLoading = true
				this.$api.common.getIndexList({
					page: this.page,
					rows: this.row
				}).then(res => {
					if (res.code == 1) {
						this.noticeList = this.noticeList.concat(res.data.list)
						// this.noticeList = res.data.list
						if (res.data.list.length == 0) {
							this.loadTitle = '没有更多了'
							this.$u.toast('没有更多了');
						} else {
							this.page += 1
						}
						this.isLoading = false
					}

				})
			},
			getMsgFlow(id, source) {
				this.$api.common.getMsgFlow({
					id,
					source
				}).then(res => {
					if (res.code == 1) {
						this.msgFlow = res.data;
						this.handleNotice.status = String(res.data.status)
						this.handleNotice.describe = res.data.selfDescribe.describe
						let imgs = res.data.selfDescribe.imgs || ''
						this.handleNotice.imgs = imgs.split(',')

					}
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #f2f2f2;
	}

	.add-img {
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		border-radius: 12rpx;
		border: 2rpx solid #ddd;
		/* opacity: 0.7; */
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.notify {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
	}

	.baojin {
		color: #426ef6;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.baojin-info {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 40rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		opacity: 0.9;
		width: 80%;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.clip {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.baojin-f {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
	}

	.num {
		color: #0c2f5b;
		text-align: center;
		font-family: "Alimama FangYuanTi VF";
		font-size: 55rpx;
		font-style: normal;
		font-weight: Bold-Round;
		line-height: normal;
	}

	.num-text {
		color: #516b8c;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 10rpx;
	}

	.item {
		height: 106rpx;
		flex-shrink: 0;
		border-radius: 16rpx;
		border: 1rpx solid #f1f7ff00;
		background: linear-gradient(99deg, #F1F7FF 0%, #f1f7ff00 99.22%);
		display: flex;
	}

	.baojin-time {
		color: #546d8c;
		font-family: "PingFang SC";
		/* font-size: 15rpx; */
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.finish-btn {
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #0068F0 0%, #0196FE 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
	}

	.d-btn {
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		/* border: 0.2rpx solid #000; */
		background: linear-gradient(80deg, #FCA624 0%, #FFA24B 100%);
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
	}

	.y-btn {
		width: 120rpx;
		height: 52rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
		font-family: "PingFang SC";
		font-size: 30rpx;
		font-style: normal;
		font-weight: 500;
		background: linear-gradient(80deg, #CCC 0%, #BABABA 100%);
	}
</style>